<template>
  <tf-panel class="page-2 page-common" title="整体概况">
    <section class="descript">
      <h6>满意度调研情况</h6>
      <div class="desc">当前集团公司已开展满意度摸底调研，预估摸底调研将与3月15日前结束。调研结果数据暂未提供。</div>
    </section>
    <section class="descript">
      <h6>触点满意度情况</h6>
      <div class="desc">本周触点满意度工作持续展开，按日对触点满意度结果进行推送至各通路各网点，对各通道满意度最差的TOP通道按周次督导。</div>
    </section>
    <table class="tab">
      <tr>
        <td>县市名称</td>
        <td>社会渠道</td>
        <td>营业</td>
        <td>直销</td>
        <td>终端销售</td>
      </tr>
      <tr>
        <td>鹿城</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>乐清</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>乐清</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>鹿城</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>乐清</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>乐清</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>乐清</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>乐清</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>乐清</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
      <tr>
        <td>鹿城</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
        <td>99.4%</td>
      </tr>
    </table>
    <section class="bottom">
      数据来源：省公司通报，服务组数据统计
    </section>
  </tf-panel>
</template>
<script>
import TfPanel from '@/components/TfPanel/tf-panel.vue'

export default {
  name: 'tf-page-two',
  components: { TfPanel }
}
</script>
<style lang="scss" scoped>

.page-2 {
  padding: .8rem;
  color: #D2E3C7;
  .title{
    font-size: 1rem;
  }
  .descript {
    margin-top: .5rem;
    h6{
      display: inline-block;
      margin-bottom: .1rem;
      font-size: .7rem;
      line-height: 1.5;
      padding: 0 .2rem;
      background: linear-gradient(to right, #23738B, transparent);
    }
    .desc{
      position: relative;
      padding: .3rem .2rem .3rem 1rem;
      font-size: .49rem;
      line-height: 1.3;
      background: #253C5B;
      box-shadow: .1rem .1rem .15rem #222;
      margin-bottom: .4rem;
      &:after{
        content: ' ';
        position: absolute;
        left: .2rem;
        top: .5rem;
        width: .3rem;
        height: .3rem;
        border-radius: 50%;
        background-color: #FFF;
      }
    }
  }
  .tab{
    width: 100%;
    font-size: .51rem;
    line-height: 2.5;
    text-align: center;
    vertical-align: middle;
    table-layout:fixed;
    word-break: break-all;
    td {
      width: 20%;
      border: 1px;
    }
    tr:nth-child(even){
      background-color: #697264;
    }
    tr:nth-child(odd){
      background-color: #353932;
    }
    tr:first-child{
      background-color: #111;
    }
  }
  .bottom {
    position: relative;
    margin: 1rem 0 .3rem 0;
    font-size: .5rem;
    padding-left: 1rem;
    &:after {
      position: absolute;
      left: .2rem;
      top:0;
      content: ' ';
      width: .4rem;
      height: .4rem;
      border-radius: 50%;
      background: linear-gradient(#20D3A4, #3591BF);
    }
  }
}
</style>
